<template>
  <div class="loginFromBox">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
             label-position="left">
      <div class="title-container">
        <h3 class="title">{{title}}</h3>
      </div>
      <el-form-item prop="username">
        <span class="svg-container" v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V1') !== -1" >
          <svg-icon icon-class="user"/>
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入账号"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
          style="width: 90%;"
          v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V2') !== -1"
        />
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="请输入账号"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
          style="width: 88%;"
          v-else
        />
      </el-form-item>
      <el-form-item prop="password" class="password">
        <span class="svg-container" v-if="$store.state.app.footer.webTemplateType && $store.state.app.footer.webTemplateType.indexOf('V1') !== -1" >
          <svg-icon icon-class="password"/>
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="请输入密码"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
          style="width: 78%;"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
        </span>
      </el-form-item>
      <el-form-item prop="picCode" class="picCode" style="position:relative;">
        <span class="svg-container" v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V1') !== -1">
          <svg-icon icon-class="password"/>
        </span>
        <el-input
          ref="picCode"
          v-model="loginForm.picCode"
          placeholder="请输入图片验证码"
          name="picCode"
          type="text"
          tabindex="3"
          auto-complete="on"
          style="width: 75%;"
          v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V1') !== -1"
          @keyup.enter.native.prevent="handleLogin"
        />
        <el-input
          ref="picCode"
          v-model="loginForm.picCode"
          placeholder="请输入图片验证码"
          name="picCode"
          type="text"
          tabindex="3"
          auto-complete="on"
          style="width: 61%;padding-left: 13px;"
          v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V1') == -1"
          @keyup.enter.native.prevent="handleLogin"
        />
        <div style="cursor: pointer;" @click="getPic">
          <img style="width: 80px;height: 39px;vertical-align:-2px;" :src="pic" alt="">
        </div>
      </el-form-item>
      <el-button  :loading="loading" type="primary" style="width:100%;margin-bottom:15px;"
                 @click.native.prevent="handleLogin"
                  v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V1') !== -1"
      >登录
      </el-button>
      <el-button :loading="loading" type="primary" style="width:90%;margin-bottom:10px;"
                 @click.native.prevent="handleLogin"
                 v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V1') == -1"
      >登录
      </el-button>
      <div class="forget-password" @click="resetPwd"
           v-if="$store.state.app.footer.webTemplateType && ( $store.state.app.footer.webTemplateType.indexOf('V1') !== -1 || $store.state.app.footer.webTemplateType.indexOf('V5') !== -1 )">
        忘记密码?点击找回</div>

      <div class="forget-password" style="text-align:right;margin-right: 13px;" @click="resetPwd"
           v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V2') !== -1"
      >忘记密码?点击找回</div>

      <div class="forget-password" style="text-align:right;margin: 0 13px;display: flex; justify-content: space-between;"
           v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V4') !== -1"
      >
        <span v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('gx') == -1 ">
          <a href="https://aca-manage.ceivs.cn/" target="_blank">管理员登录</a></span>
        <span  @click="resetPwd">
          忘记密码?点击找回
        </span>
      </div>

      <div class="forget-password" v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V3') !== -1">
        <div @click="resetPwd">忘记密码</div>
        <div @click="toRegister">去注册</div>
      </div>
    </el-form>
    <div class="login-bottom" v-if="$store.state.app.footer.webTemplateType && ( $store.state.app.footer.webTemplateType.indexOf('V1') !== -1 || $store.state.app.footer.webTemplateType.indexOf('V5') !== -1 )">
      还没有账号？
      <span class="to-registered" @click="toRegister">去注册！</span>
    </div>
    <div class="login-bottom" style="height: 45px;line-height: 45px;"
         v-if="$store.state.app.footer.webTemplateType &&  $store.state.app.footer.webTemplateType.indexOf('V2') !== -1 ||  $store.state.app.footer.webTemplateType.indexOf('noregister') !== -1">
      还没有账号？
      <span class="to-registered" @click="toRegister">去注册！</span>
    </div>
  </div>
</template>

<script>
  import {validPassWord} from '@/utils/validate'
  import {picCode} from '@/api/login'

  export default {
    name: "index",
    props:{
      title:{
        type:String,
        default:"登录"
      }
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入正确的账号'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (!validPassWord(value)) {
          callback(new Error('请输入正确的密码'));
          this.$message.error("密码应为8-20位，且同时包含字母，数字，特殊字符。（特殊字符从_、*、/、#、@ 五种中至少选择一种）")
        } else {
          callback()
        }
      };
      return {
        loginForm: {
          username: '',
          password: '',
          picCode: ""
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', message: "请输入密码"}],
          picCode: [{required: true, trigger: 'blur', message: "请输入图片验证码"}]
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined,
        pic: "",
      }
    },
    watch: {
      $route: {
        handler: function(route) {
          let re_path= route.query && route.query.re_path;
          if (re_path) {
            let param = JSON.parse(JSON.stringify(route.query));
            delete param.re_path;
            re_path = `${re_path}?${this.$utils.transParams(param)}`;
          }
          this.redirect = re_path;
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      getPic() {
        picCode(this.$store.state.user.uuid).then((resonpes) => {
          this.pic = resonpes.data
        });
      },
      showPwd() {
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleLogin() {
        // console.log(this.redirect )
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            this.$store.dispatch('user/login', this.loginForm).then(() => {
              if(this.$store.state.app.footer.webTemplateType &&  this.$store.state.app.footer.webTemplateType.indexOf('gx') !== -1){
                this.$router.push({path: this.redirect || '/studyspace/my-trainclass'})
              }else {
                this.$router.push({path: this.redirect || '/'})
              }
              this.loading = false;
            }).catch((err) => {
              if (err.code == 8043){
                this.$router.push({path: '/blind-phone'})
              }if (err.code == 8041){
                this.$router.push(
                  {
                    name: 'weak-password',
                    params:{
                      username:this.loginForm.username
                    }
                  }
                )
              }else {
                this.loading = false;
                this.getPic();
              }
            })
          } else {
            console.log('提交失败!!');
            return false
          }
        })
      },
      resetPwd(){
        let routerJump = this.$router.resolve({
          path: "/resetPwd",
        });
        window.open(routerJump.href, '_blank');
      },
      toRegister(){
        let routerJump = this.$router.resolve({
          path: "/register",
        });
        window.open(routerJump.href, '_blank');
      }
    },
    mounted() {
      this.getPic()
    }
  }
</script>

<style scoped lang="scss">
 /* .password{
    margin-bottom: 30px;
    ::v-deep .el-form-item__error {
      word-break: break-word;
      position: relative;
      top: 0px;
    }
  }*/
  ::v-deep .el-form-item__error {
    padding-left: 29px;
  }
  .picCode{
    ::v-deep .el-form-item__content {
      display: flex;
    }
  }

</style>
